<template>
  <div class="shopping">
    <ul class="teamShopping_ul">
      <li
        class="teamShopping_ul_li"
        v-for="(item,index) in teamShopping"
        :key="index"
        @click="toShopping(item.id)"
      >
        <div>
          <van-swipe lazy-render>
            <van-swipe-item
              style="height:200px;"
              v-for="(items,indexs)  in   item.imgList "
              :key="indexs"
              @click.stop="bigImg(index,indexs)"
              fit="contain"
            >
              <van-image :src="items" class="swip_img">
                <template v-slot:loading>
                  <van-loading size="20px" vertical>加载中...</van-loading>
                </template>
              </van-image>
            </van-swipe-item>
          </van-swipe>
        </div>
        <p>{{item.title}}</p>
        <p>
          ￥{{item.price}}
          <span>原价￥{{item.originalPrice}}</span>
        </p>
      </li>
    </ul>
  </div>
</template>

<script>
import formatDateTime from '../utils/data'
import { ImagePreview } from 'vant'

export default {
  // 接受父组件传递的数据
  props: {
    teamShopping: {
      type: Array, // 渲染的列表值
    },
    currentPage: {
      type: Number, // 当前现实页码数
    },
    total: {
      type: Number, // 总数
    },
    pageSize: {
      type: Number, // 每页显示数据
    },
    pageCount: {
      type: Number, // 共有几页
    },
  },
  methods: {
    formatDateTime(val) {
      return formatDateTime.formatDateTime5(val)
    },
    // 分页
    handelChange(currentPage) {
      this.currentPage = currentPage
      this.init()
    },
    // 大图预览
    bigImg(index, indexs) {
      ImagePreview({
        images: this.teamShopping[index].imgList, // 预览图片的那个数组
        loop: false,
        closeable: true,
        startPosition: indexs, // 指明预览第几张图
      })
    },
    toShopping(val) {
      this.$router.push('/ShoppingInfo/' + val)
    },
  },
}
</script>

<style scoped>
.teamShopping_ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.teamShopping_ul_li {
  padding: 10px;
  font-size: 16px;
  width: 50%;
  box-sizing: border-box;
}
.teamShopping_ul_li > div > img {
  height: 180px;
  width: 100%;
}
.teamShopping_ul_li > p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.teamShopping_ul_li > p:nth-child(2) {
  font-size: 14px;
}
.teamShopping_ul_li > p:nth-child(3) {
  font-size: 20px;
  color: red !important;
}

.teamShopping_ul_li > p:nth-child(4) {
  color: #ccc;
}
.teamShopping_ul_li span {
  margin-left: 0.5rem;
  color: #ccc !important;
  font-size: 14px;
}
.swip_img {
  border-radius: 4px;
}
</style>